<template>
  <transition>
  <div class="app-3c-search">
    <div class="search-content">
      <mt-field label="" placeholder="请输入工厂编号或名称（支持模糊查询）" v-model="searchValue" @keyup.enter.native="handleSearch3c">
        <span class="iconfont icon-search" @click="handleSearch3c"></span>
      </mt-field>
    </div>

    <div class="media-list" v-if="dataList.length>0">
      <mt-cell v-for="(item,index) in dataList" :title="(index+1)+'.'+item.factoryname" is-link @click.native="handleDetails(item)"></mt-cell>
      <div class="more-list-tips" v-if="dataList.length>=5">结果多于5条记录，请输入更精确的查找</div>
    </div>
    <div class="standard-content" v-else>
      <div class="standard-title">安全玻璃标准</div>
      <dl class="standard-list">
        <dd class="item"><span class="item-content item-left">中国国家标准认证</span><span class="item-content item-right">GB9656、3C</span>
        </dd>
        <dd class="item"><span class="item-content item-left">美国标准DOT</span><span class="item-content item-right">ANSI Z26.1</span>
        </dd>
        <dd class="item"><span class="item-content item-left">欧共体标准</span><span class="item-content item-right">ECE R43认证</span>
        </dd>
        <dd class="item"><span class="item-content item-left">日本工业标准</span><span class="item-content item-right">JIS R3211</span>
        </dd>
        <dd class="item"><span class="item-content item-left">澳大利亚标准</span><span class="item-content item-right">AS/NZS  2080</span>
        </dd>
        <dd class="item"><span class="item-content item-left">德国大众标准</span><span class="item-content item-right">TL 957</span>
        </dd>
        <dd class="item"><span class="item-content item-left">韩国</span><span
          class="item-content item-right">SK</span></dd>
      </dl>
    </div>
  </div>
    </transition>
</template>

<script>
  import { Button,Toast,Picker  } from 'mint-ui';
export default {
  data () {
    return{
      searchValue:'',
      dataTotal:6,
      dataList:[],
//      dataList:[
//        {
//          title:'黑龙江佳星玻璃股份有限公司',
//          id:'1'
//        },{
//          title:'黑龙江佳星玻璃股份有限公司',
//          id:'2'
//        },{
//          title:'黑龙江佳星玻璃股份有限公司',
//          id:'3'
//        },{
//          title:'黑龙江佳星玻璃股份有限公司',
//          id:'4'
//        },{
//          title:'黑龙江佳星玻璃股份有限公司',
//          id:'5'
//        }
//      ]
    }
  },
  watch: {},
  beforeDestroy: function() {
    document.body.removeAttribute("class","add_bg");
  },
  mounted(){
    document.getElementsByTagName("body")[0].className="add_bg";
  },
  methods:{
    handleSearch3c(){
      if(this.searchValue==''){
        Toast({
          message: '请输入工厂编号或名称',
          position: 'middle',
          duration: 1000
        });
        return false;
      }
        var params = new URLSearchParams();
        params.append('codeOrName',this.searchValue);
        this.$axios({
          method: 'post',
          url:'gp/app/glassFactoryApp!getFiveOfStandardGlassFactory.do',
          data:params
        }).then((res)=>{
          if(res.data.result==true && res.data.statusCode==200){
            if(res.data.object.length<=0){
              Toast({
                message: '请输入正确的工厂编号或名称',
                position: 'middle',
                duration: 1000
              });
            }else{
              this.dataList=res.data.object
            }
          }else{
            Toast({
              message: res.data.message,
              position: 'middle',
              duration: 1000
            });
          }
      })
    },
    handleDetails(item){
      this.$router.push({path:'/app-3c-details',query:{id:item.id}})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
  .app-3c-search{
    padding:60px 0 0;
  }
  .app-3c-search .search-content{
    background: #007EE5;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    overflow: auto;
    height: 60px;
    padding:12px 24px;
    text-align: center;
    z-index: 1000;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.02);
  }
  .app-3c-search .search-content .action-ruku{
    position: absolute;
    top: 13px;
    right: 12px;
    font-size: 13px;
    height: 34px;
  }
  .app-3c-search .search-content .mint-cell-wrapper{
    padding:2px 10px;
  }
  .app-3c-search .search-content .mint-cell{
    border: 1px solid #ddd;
    border-radius:20px;
    padding:0 6px;
    min-height: inherit;
  }
  .app-3c-search .search-content .mint-cell .mint-field-core{
    height: 30px;
    font-size: 14px;
  }
  .app-3c-search .search-content  .icon-search{
    padding-left: 12px;
    font-size: 20px;
    color: #007EE5;

  }
  .app-3c-search .more-list-tips{
    background: #f5f5f5;
    padding:12px 0;
    text-align: center;
    font-size: 14px;
    color: #333;
  }

  .app-3c-search .standard-content {
    padding:24px 16px 0; }
  .app-3c-search .standard-title {
    position: relative;
    margin: 0 0 18px;
    font-size: 16px;
    color: #444;
    font-weight: bold;
    text-align: center; }
  .app-3c-search .standard-title:before {
    background: #ddd;
    display: inline-block;
    vertical-align: middle;
    width:50px;
    height: 1px;
    content: '';
    margin-right:16px; }
  .app-3c-search .standard-title:after {
    background: #ddd;
    display: inline-block;
    vertical-align: middle;
    width:50px;
    height: 1px;
    content: '';
    margin-left:16px; }
  .app-3c-search .standard-list {
    padding:6px 0;
    margin: 0;
    border: 1px solid #e5e5e5; }
  .app-3c-search .standard-list .item {
    margin: 0;
    font-size: 0; }
  .app-3c-search .standard-list .item .item-content {
    display: inline-block;
    width: 50%;
    padding:6px 24px;
    font-size:15px;
    color: #444; }
  .app-3c-search .standard-list .item .item-right {
    border-left: 1px solid #e5e5e5; }
</style>
